{extend name="base" /}
{block name="body"}
{include file="common/header" /}
        <p style="font-size: 68px; text-align: center; color: #16baaa;">
         图片展示
             </p> 
   <div id="js_juanzeng" class="layui-row layui-col-space16">

<hr class="layui-border-red">
     {volist name="image" id="vo" empty="<strong>暂时没有数据</strong>"}
   <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs12">
      <div class="fly-panel" style="border-radius:5%;background-image: url('/static/libs/images/y-so-serious-white.png');box-shadow: 0px 3px 5px rgba(0, 0, 0, .1);">
    <p style="font-size: 50px; text-align: center; color: #16baaa;">{$vo.id}</p>
    <!-- 快捷方式 -->
        
    <p style="text-align: center;">
     <img src="{$vo.url}" width="250" height="250" style="border-radius:50%;" class="tdImg" tb-img=""></p>
  
        </div>
      </div>
        
    {/volist} 
</div> 
<!--默认隐藏，用于追加-->
            <!---->
            <div class="js_page" style="display:none"></div>
            <!---->
   {/block} 
   {block name="js"}
           <script> 
      layui.use(['layer','flow'], function(){
        var flow = layui.flow;
        var layer = layui.layer;
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        //当前模块共多少页
        var pages   =  $('.js_page').find('.pagination').find('li').not(':last,:first').length;
       
        flow.load({
        elem: '#js_juanzeng' //流加载容器
        ,done: function(page, next){ //执行下一页的回调
          //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
               $.get('/image/info?page='+page, function(result){
                const datalist = result.data.data;

                  var lis = [];
                  for(var i = 0; i < datalist.length; i++){
                  //假设你的列表返回在data集合中
                  lis.push(`<div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs12">
      <div class="fly-panel" style="border-radius:5%;background-image: url('/static/libs/images/y-so-serious-white.png');box-shadow: 0px 3px 5px rgba(0, 0, 0, .1);">
    <p style="font-size: 50px; text-align: center; color: #16baaa;">${datalist[i].id-8}</p>
    <!-- 快捷方式 -->
        
    <p style="text-align: center;">
     <img src="${datalist[i]['url']}" width="250" height="250" style="border-radius:50%;" class="tdImg" tb-img=""></p>
        </div>
      </div>`);
                }
                  //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                  //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                  next(lis.join(''), page < result.data.last_page);
                        
                          });
                   }
            });
        
      });            

      </script>

  <!--版权-->
  <div class="copy">
    Copyright © SIYUCMS 2019-2023.All right reserved.Powered by SIYUCMS 网站备案/许可证号 <a style="color: #aaa;" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">辽ICP备16008135号-2</a>
 
  </div>
{/block}